<template>
  <div class="container">
    <div class="config">
      <el-form>
        <el-form-item label="库房:">
          <el-select v-model="form.area" placeholder="--请选择--">
            <el-option
              v-for="item in area"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="dialog = true">新增日志</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="rightbtn"
            >库房管理员出入库</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 弹窗 -->
    <el-drawer
      :title="alertTitle"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
      :modal="false"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="标题" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="出入库类型" prop="outbound">
            <el-select v-model="ruleForm.outbound" placeholder="请选择活动区域">
              <el-option
                v-for="item in outbound"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  v-model="ruleForm.date1"
                  type="datetime"
                  placeholder="选择日期时间"
                  align="right"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="记录类型" prop="record">
            <el-select v-model="ruleForm.record" placeholder="--请选择--">
              <el-option
                v-for="item in record"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人员名称" prop="people">
            <el-select v-model="ruleForm.people" multiple placeholder="请选择">
              <el-option
                v-for="item in people"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人员类型" prop="peopleType">
            <el-select v-model="ruleForm.peopleType" placeholder="--请选择--">
              <el-option
                v-for="item in peopleType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="content">
            <el-input type="textarea" v-model="ruleForm.content"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <div class="calendar">
      <FullCalendar ref="myCalendar" :options="calendarOptions" />
      <th></th>
    </div>
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import listPlugin from '@fullcalendar/list';
export default {
  components: {
    FullCalendar,
  },
  data() {
    return {
      // 查询
      form: {
        area: '',
      },
      area: [
        {
          value: 0,
          label: '1号展厅',
        },
        {
          value: 1,
          label: '1号展柜',
        },
      ],
      //弹窗
      alertTitle: '新增库房日志',
      table: false,
      dialog: false,
      loading: false,
      formLabelWidth: '80px',
      timer: null,
      ruleForm: {
        title: '',
        outbound: '',
        date1: '',
        record: '',
        people: [],
        peopleType: '',
        content: '',
      },
      outbound: [
        {
          value: 0,
          label: '出库',
        },
        {
          value: 1,
          label: '入库',
        },
        {
          value: 2,
          label: '信息变更',
        },
      ],
      people: [
        {
          value: 0,
          label: '系统管理员',
        },
        {
          value: 1,
          label: '金馆长',
        },
        {
          value: 2,
          label: '审核员',
        },
        {
          value: 3,
          label: '管理员',
        },
      ],
      //记录类型
      record: [
        { value: 0, label: '藏品' },
        { value: 1, label: '资料' },
        { value: 2, label: '人员' },
        { value: 3, label: '物品' },
        { value: 4, label: '其他日常事项' },
      ],
      //人员类型
      peopleType: [
        { value: 0, label: '库房管理员' },
        { value: 1, label: '紧急入库人员' },
        { value: 2, label: '非紧急入库人员' },
      ],
      //验证规则
      rules: {
        title: [
          { required: true, message: '请输入标题名称', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度在 1 到 10 个字符',
            trigger: 'blur',
          },
        ],
        outbound: [
          { required: true, message: '请选择出入库', trigger: 'change' },
        ],
        date1: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change',
          },
        ],
        record: [{ required: true, message: '请选择类型', trigger: 'change' }],
        people: [
          {
            type: 'array',
            required: true,
            message: '请选择人员',
            trigger: 'change',
          },
        ],
        peopleType: [
          { required: true, message: '请选择人员类型', trigger: 'blur' },
        ],
      },
      //日历
      calendarOptions: {
        // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
        initialView: 'dayGridMonth', // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
        firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
        locale: 'zh-cn', // 切换语言，当前为中文
        eventColor: '#3BB2E3', // 全部日历日程背景色
        // themeSystem: 'bootstrap', // 主题色(本地测试未能生效)
        // initialDate: moment().format('YYYY-MM-DD'), // 自定义设置背景颜色时一定要初始化日期时间
        timeGridEventMinHeight: '20', // 设置事件的最小高度
        aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例。
        // displayEventTime: false, // 是否显示时间
        // allDaySlot: false, // 周，日视图时，all-day 不显示
        eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
        headerToolbar: {
          // 日历头部按钮位置
          left: 'today,prev,next',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay',
        },
        buttonText: {
          today: '今天',
          month: '月',
          week: '周',
          day: '日',
        },
        slotLabelFormat: {
          hour: '2-digit',
          minute: '2-digit',
          meridiem: false,
          hour12: false, // 设置时间为24小时
        },
        eventLimitNum: {
          // 事件显示数量限制(本地测试未能生效)
          dayGrid: {
            eventLimit: 5,
          },
          timeGrid: {
            eventLimit: 2, // adjust to 6 only for timeGridWeek/timeGridDay
          },
        },
        eventDblClick: this.handleEventDblClick, // 双击日历日程事件 (这部分是在源码中添加的)
        eventClickDelete: this.eventClickDelete, // 点击删除标签事件 (这部分是在源码中添加的)
        eventDrop: this.eventDrop, // 拖动日历日程事件
        eventResize: this.eventResize, // 修改日历日程大小事件
        select: this.handleDateSelect, // 选中日历格事件
        eventDidMount: this.eventDidMount, // 安装提示事件
        // loading: this.loadingEvent, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）
        // selectAllow: this.selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
        eventMouseEnter: this.eventMouseEnter, // 鼠标滑过
        allowContextMenu: false,
        editable: true, // 是否可以进行（拖动、缩放）修改
        eventStartEditable: true, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
        eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
        selectable: true, // 是否可以选中日历格
        selectMirror: true,
        selectMinDistance: 0, // 选中日历格的最小距离
        dayMaxEvents: true,
        weekends: true,
        navLinks: true, // 天链接
        selectHelper: false,
        slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
      },
    };
  },
  methods: {
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？')
        .then((_) => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch((_) => {
          this.loading = false;
          this.dialog = false;
        });
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    eventMouseEnter(event, jsEvent, view) {
      // 鼠标划过的事件
      if (event.event.classNames.length) {
        // console.log(event)
      }
    },
    eventDrop(
      event,
      dayDelta,
      minuteDelta,
      allDay,
      revertFunc,
      jsEvent,
      ui,
      view
    ) {
      console.log(event);
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  height: 100vh;
  overflow-y: scroll;
}
.config {
  width: 100%;
  overflow: hidden;
}
.config .el-form-item {
  float: left;
  display: flex;
  margin-right: 15px;
  margin-bottom: 5px;
  margin-top: 5px;
}
.el-form-item ::v-deep.el-form-item__label {
  text-align: center;
}
.config .el-form-item ::v-deep .el-form-item__label {
  width: 100px;
  text-align: center;
  background: #ddd;
}
.el-select {
  float: left;
}
.rightbtn {
  float: right !important;
}
.el-calendar-table__row td {
  overflow: hidden !important;
}

td {
  overflow: hidden !important;
}
.el-calendar-day {
  overflow: hidden;
}
.el-calendar-day p {
  margin: 0 !important;
  text-align: right;
}
.calender-day-child-bottom {
  width: 100%;
  height: 54px;
  font-size: 11px;
  color: #4e97fd;
}
.calender-day-child-bottom-child {
  width: 100%;
  height: 12px;
  margin-bottom: 6px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 12px;
}
</style>
